<template>
  <!-- 用户头像区域 -->
  <view class="app-user-head" v-if="user">
    <view class="head_container"
      v-if="user.userbase">
      <view class="le_Img">
        <image :src="img+user.userbase.fHeadPic">
        </image>
        <u-upload ref="Pic" class="seller"
          :header="header" :action="action"
          :auto-upload="true" width="120rpx"
          height="120rpx"
          @on-success="uploadChange"
          :show-upload-list="false">
        </u-upload>
      </view>
      <view class="ri_content">
        <view class="ri_head">
          <view class="name">
            {{user.userbase.fName}}
          </view>
          <navigator
            url="/pages/index/punchtheclock">
            <view class="btn">
              打卡 √</view>
          </navigator>
        </view>
        <view class="ri_foor">
          <navigator
            url="/pages/index/targetindex">
            <view class="foorItem">
              <view>总目标</view>
              <view class="score">
                {{user.iZongMuBiao}}
              </view>
            </view>
          </navigator>
          <navigator
            url="/pages/index/targetindex">
            <view class="foorItem">
              <view>本月目标
              </view>
              <view class="score">
                {{user.iYueMuBiao}}
              </view>
            </view>
          </navigator>
          <navigator
            url="/pages/sale/visit_records">
            <view class="foorItem">
              <view>今日拜访
              </view>
              <view class="score">
                {{user.iVisitCount}}
              </view>
            </view>
          </navigator>
          <navigator open-type="switchTab"
            url="/pages/order/order">
            <view class="foorItem">
              <view>今日订单
              </view>
              <view class="score">
                {{user.iOrderCount}}
              </view>
            </view>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      action: this.urlimg + 'api/Upfile/PostImgFile',
      header: {
        token: uni.getStorageSync('token')
      },
      img: this.urlimg,
      user: {}
    }
  },
  props: ['user'],
  methods: {
    uploadChange(res) {
      console.log('🚀 ~ file: app-userHead.vue ~ line 63 ~ uploadChange ~ res', res)
      this.$axios('api/User/ChangeFace', 'post', { value: res.Value[0].sFileUrl }).then(res => {
        this.getuser()
        uni.showToast({
          title: '更换头像成功',
          duration: 2000
        })
      })
    }
    // getuser() {
    //   let token = uni.getStorageSync('token')
    //   this.$axios('api/User/GetUserByToken', 'post', { Value: token }).then(res => {
    //     uni.setStorageSync('user_info', res.Value)
    //     this.user = res.Value
    //   })
    // }
  },
  mounted() {
    // this.getuser()
  }
}
</script>

<style lang="scss" scoped>
.seller {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
// 用户头像区域样式
.app-user-head {
  margin-left: 18rpx;
  width: 730rpx;
  height: 212rpx;
  background-color: #fff;
  border-radius: 10rpx;
  position: relative;
  z-index: 1;
  .head_container {
    padding: 20rpx;
    display: flex;
  }

  .le_Img {
    margin-right: 20rpx;
    width: 20%;
    position: relative;
    image {
      width: 142rpx;
      height: 142rpx;
      border-radius: 50%;
    }
  }

  .ri_content {
    width: 80%;

    .ri_head {
      display: flex;
      font-size: 28rpx;
      justify-content: space-between;
      margin-bottom: 20rpx;

      .btn {
        font-size: 24rpx;
        cursor: pointer;
        background-color: #169bd5;
        color: #fff;
        width: 120rpx;
        height: 40rpx;
        display: inline-block;
        text-align: center;
        border-radius: 10rpx;
        line-height: 40rpx;
      }
    }

    .ri_foor {
      display: flex;
      font-size: 24rpx;
      justify-content: space-between;
      text-align: center;

      .foorItem {
        .score {
          color: #0079fe;
          margin-top: 10rpx;
        }
      }
    }
  }
}
</style>